<template>
  <div class="file file1">
    <div class="file-type">
      <div class="fill-types">
        <el-card class="box-card" style="width: 100%" v-loading="getLoading">
          <div slot="header">
            <el-button type="primary" class="addType" @click="doAddType"
              v-if="operationList.includes('edit')">新建角色</el-button>
            <div class="clearfix">
              <span class="title">角色管理</span>
              <div>
                <el-button type="text" style="margin: 2px auto" @click="upShowType"
                  v-if="operationList.includes('edit')">编辑</el-button>
                <span v-if="
                  operationList.includes('edit') &&
                  operationList.includes('del')
                " style="color: #03c192">|</span>
                <el-button type="text" style="margin: 2px auto" @click="delShowType"
                  v-if="operationList.includes('del')">删除</el-button>
              </div>
            </div>
          </div>
          <div class="card-content">
            <div class="text item">
              <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
                infinite-scroll-immediate="false" infinite-scroll-distance="10"
                style="overflow:auto;width:100%;height:511px;">
                <li v-for="(item, index) in dataList" :key="index" class="infinite-list-item">
                  <div class="infinite-list-item-div" @click="chooseType(index)" :style="
                      chooseIndex == index
                        ? `background:${$store.state.theme.theme_color || '#03C192'}`
                        : ''
                    ">
                    <div class="infinite-list-item-view-all">{{ item.viewAll && item.viewAll == 1 ? '是' : '否' }}</div>
                    <span :style="chooseIndex == index ? 'color: #FFFFFF' : ''">{{ item.roleName }}</span>
                    <div :style="
                        chooseIndex != index
                          ? 'background: #FFF1D4'
                          : ''
                      ">{{ item.userNum }}</div>
                  </div>
                </li>
                <p v-if="noMore" style="margin-top: 10px; font-size: 13px; color: #ccc;text-align: center">
                  没有更多了~
                </p>
              </ul>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog :title="dialogVisibleTitle" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
      custom-class="dialog1">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="typeName">
          <el-input style="width: 300px" :maxlength="20" v-model="ruleForm.typeName" placeholder="请输入，限20个字"></el-input>
        </el-form-item>
        <el-form-item label="是否查看全部项目" prop="viewAll">
          <el-radio-group v-model="ruleForm.viewAll">
            <el-radio :label="item.value" v-for="item in options" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义名称" prop="customName">
          <el-input v-model="ruleForm.customName"></el-input>
        </el-form-item>
        <el-form-item label="是否多选" prop="multipleType">
          <el-radio-group v-model="ruleForm.multipleType">
            <el-radio :label="item.value" v-for="item in options" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/apiCompanyUser";

export default {
  name: "CompanyDetail",
  props: {
    operationList: Array,
    changeType: Number,
  },
  data() {
    return {
      dataDetail: {},
      count: 0,
      chooseIndex: 0,
      dataList: [],
      tableLoading: false,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      typeName: "",
      dialogVisible: false,
      dialogVisibleTitle: '新增角色',
      allPage: 0,
      chooseTypeId: null,
      typeId: null,
      getLoading: false,
      loading: false,
      options: [
        {
          value: 1,
          label: '是',
        },
        {
          value: 2,
          label: '否',
        }
      ],
      roleType: 1,
      ruleForm: {
        typeName: '',
        roleType: '',
        viewAll: 2,
        customName: '',
        multipleType: 2,
      },
      rules: {
        typeName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        roleType: [
          { type: 'date', required: true, message: '请选择平台', trigger: 'change' }
        ],
        viewAll: [
          { required: true, message: '请选择是否查看全部项目', trigger: 'change' }
        ],
        multipleType: [
          { required: true, message: '请选择是否多选', trigger: 'change' }
        ],
        customName: [
          { required: true, message: '请输入自定义名称', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    typeId(val) {
      if (val) {
        this.$emit("chooseType", val);
      }
    },
    changeType(val) {
      if (val) {
        this.pageNum = 1;
        this.chooseTypeId = null;
        this.load();
      }
    },
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.pageNum > this.allPage - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  activated() {
    // if(this.operationList.includes('fileType:view')){
    //   this.getTypeList();
    // }
    this.pageNum = 1;
    this.chooseTypeId = null;
    this.getTypeList();
  },
  methods: {
    delType() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        ids: this.dataList[this.chooseIndex].id,
        status: 2,
      };
      API.delRole(params).then((res) => {
        if (res.key === 1000) {
          this.pageNum = 0;
          this.dataList = [];
          this.dialogVisible = false;
          this.chooseTypeId = null;
          this.chooseIndex = 0;
          this.load();
          this.$message({
            type: "success",
            message: "成功",
          });
        }
      });
    },
    delShowType() {
      let that = this;
      that
        .$confirm("此操作将删除该角色, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.delType();
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    upShowType() {
      this.dialogVisibleTitle = '修改角色'
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
      this.ruleForm.typeName = this.dataList[this.chooseIndex].roleName;
      this.ruleForm.roleType = this.dataList[this.chooseIndex].roleType;
      this.chooseTypeId = this.dataList[this.chooseIndex].id;
      this.ruleForm.viewAll = this.dataList[this.chooseIndex].viewAll;
      this.ruleForm.customName = this.dataList[this.chooseIndex].customName;
      this.ruleForm.multipleType = this.dataList[this.chooseIndex].multipleType;
      this.dialogVisible = true;
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveTypeName()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    saveTypeName() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        roleName: this.ruleForm.typeName,
        roleType: this.ruleForm.roleType,
        viewAll: this.ruleForm.viewAll,
        customName: this.ruleForm.customName,
        multipleType: this.ruleForm.multipleType,
      };
      if (this.chooseTypeId) {
        params.roleId = this.chooseTypeId;
      }
      API.upRole(params).then((res) => {
        if (res.key === 1000) {
          this.pageNum = 0;
          this.dataList = [];
          this.dialogVisible = false;
          if (this.chooseTypeId) {
            this.$message({
              type: "success",
              message: "编辑成功"
            });
          } else {
            this.$message({
              type: "success",
              message: "新增成功"
            });
          }
          this.chooseTypeId = null;
          this.load();
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.typeName = "";
    },
    doAddType() {
      this.chooseTypeId = null
      this.dialogVisibleTitle = '新增角色'
      this.ruleForm.typeName = "";
      this.ruleForm.roleType = "";
      this.ruleForm.viewAll = 2;
      this.ruleForm.multipleType = 2;
      this.ruleForm.customName = "";
      this.typeName = "";
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
      this.dialogVisible = true;
    },
    chooseType(index) {
      this.chooseIndex = index;
      this.typeId = this.dataList[index].id;
    },
    load() {
      // this.busy = true
      // if(!this.allPage || this.pageNum < this.allPage){
      //   this.busy = false
      //   this.pageNum = this.pageNum + 1
      //   this.dataList = []
      //   this.getTypeList()
      // }
      //滑到底部时进行加载
      this.loading = true;
      this.pageNum += 1; //页数+1
      this.getTypeList(); //调用接口，此时页数+1，查询下一页数据
      // setTimeout(() => {
      // }, 1000);
    },
    getTypeList() {
      this.getLoading = true;
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      API.roleList(params).then((res) => {
        this.loading = false;
        if (res.key === 1000) {
          res = res.result;
          this.total = res.count;
          this.allPage = res.allPageNumber;
          if (this.pageNum == 1) {
            this.dataList = [];
          }
          console.log(res)
          if (res.list.length > 0) {
            this.dataList = this.dataList.concat(res.list);
          }
          this.typeId = this.dataList[this.chooseIndex].id;
          this.getLoading = false;
        }
      });
    },
  },
};
</script>

<style lang="sass">
.file1
  .box-card
    width: 350px
  .el-card__header
    padding: 0
    border: none
  .el-card__body
    padding: 6px 12px 10px
    background: #FAFAFA
    border-radius: 4px
  .el-dialog__header
    border-bottom: 1px solid #EFEFEF
    .el-dialog__headerbtn
      font-size: 20px
  .el-dialog__footer
    text-align: left
    margin-left: 120px
</style>
<style lang="scss" scoped>
.text {
  font-size: 14px;
  ul::-webkit-scrollbar{
    display: none;
  }
}
.item {
  //margin-bottom: 18px;
}
.clearfix{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-card {
  padding: 12px 14px 16px;
  width: 350px;
  border-radius: 14px;
}
.card-content {
  height: 100%;
}
.typeNum {
  float: right;
  margin: 10px;
  color: #ffa700;
}
.infinite-list-item-view-all{
  background-color: #FFFFFF;
  color: #ffa700;
  margin: 10px;
}
</style>
<style lang="sass" scoped>
.file
  margin-bottom: 20px
.file-type
  width: 260px
  padding: 0 20px 20px 0
  .fill-types
    width: 240px
    background-color: white
    //margin-top: 20px
    border-radius: 14px
.addType
  width: 210px
  height: 50px
  background: linear-gradient(180deg, #616574 0%, #323540 100%)
  border: none
  border-radius: 4px
  margin-bottom: 6px
.clearfix
  .title
    font-size: 16px
    font-weight: bold
    color: #222222
    line-height: 21px
  .add
    display: flex
    align-items: center
    justify-content: center
.infinite-list-item
  .infinite-list-item-div
    display: flex
    align-items: center
    justify-content: space-between
    width: 100%
    height: 46px
    cursor: pointer
    border-radius: 4px
    padding: 0 12px
    .infinite-list-item-div-img
      width: 18px
      height: 18px
      margin-right: 10px
    span
      flex: 1
    div
      width: 22px
      height: 22px
      background: #FFFFFF
      border-radius: 3px
      font-size: 14px
      font-weight: bold
      color: #FFA700
      line-height: 22px
      text-align: center
</style>
